<template>
	<div class="list">
		<el-table
	    	:data="tableData"
	    	border
	    	style="width: 100%;">
	    	<el-table-column
	     	 	prop="Post.id"
	      		label="Id"
	      		width="80"
	      		style='text-align:center'>
	    	</el-table-column>
		    <el-table-column
		      	prop="Post.title"
		      	label="标题">
		    </el-table-column>
		    <el-table-column
		      	prop="0.comment_count"
		      	label="评论数"
		      	width="120">
		    </el-table-column>
		    <el-table-column
		      	prop="Post.key_words"
		      	label="关键词">
		    </el-table-column>
		    <el-table-column
		      	prop="Post.custom_name"
		      	label="客户名称">
		    </el-table-column>
		    <el-table-column
		      	prop="User.username"
		      	label="创建人">
		    </el-table-column>
		    <el-table-column
		      	prop="Post.updatetime"
		      	label="更新时间">
		    </el-table-column>
		    <el-table-column
		      	inline-template
		      	:context="_self"
		      	label="操作"
		      	width='200'>
		      <span>
		        <el-button type="text" size="small">编辑</el-button>
		        <el-button type="text" size="small">删除</el-button>
		        <el-button type="text" size="small">添加评论</el-button>
		      </span>
		    </el-table-column>
	  	</el-table>
	  	<div class="pagedivider_btn">
	  		<div class="block">
			    <el-pagination
			    	@current-change="handleCurrentChange"
			        :current-page="currentPage1"
			        :page-size="20"
			        layout="prev, pager, next, total"
			        :total="pageCount">
			    </el-pagination>
		  	</div>
	  	</div>
	</div>
</template>
<script>
	export default {
		name: 'list',
		data() {
	      return {
	        tableData:[],
	        currentPage1:1,
	        pageCount:10
	      }
	  	},
	  	computed:{
	  		filterTableData() {
	  			let len = this.tableData.length;
	  			for(let i = 0;i<len;i++){
	  				if(this.tableData[i].Post.key_words === null){
	  					this.tableData[i].Post.key_words = '——';
	  				}
	  				if(this.tableData[i].Post.custom_name === null){
	  					this.tableData[i].Post.custom_name = '——';
	  				}
	  				if(this.tableData[i].User.username === null){
	  					this.tableData[i].User.username = '——';
	  				}
	  				if(this.tableData[i].Post.updatetime === null){
						this.tableData[i].Post.updatetime = '——';
	  				}
	  			}
	  		}
	  	},
		created() {
	      this.axios({
			   	url:'http://192.168.0.58',
	           	method:'post'
			})
	      	.then(response=>{
	        	let resource = response.data;
	        	this.tableData = resource.data;
	        	this.currentPage1 = response.curPage;
	        	this.pageCount = resource.pageCount;
	      	})
	      	.catch(err=>{
	      		console.log(err);
	      	})
	    },
	    methods:{
	      handleCurrentChange(page) {
	        this.axios({
			  	url:'http://192.168.0.58/',
	          	method:'post',
			  	data: {
			    	id:page
			  	}
			})
	        .then(data=>{
	        	let info = data.data;
	          	this.tableData = info.data;
	          	this.currentPage1 = info.curPage;
	          	this.pageCount = info.pageCount;
	        })
	        .catch(err=>{
	        	console.log(err);
	        })
	      }
	    }
	}
</script>
<style>
	.list{
		padding: 10px;
	}
	.el-table .cell{
		padding-left: 6px;
		padding-right: 6px;
	}
	.el-table th>.cell{
		text-align: center;
	}
	.pagedivider_btn{
		margin-top: 20px;
	}
</style>
